<template>
  <div class="right-box" :class="{ 'hidden-icon': ishidden }" v-if="rightOpen">
    <div class="fold-icon" @click="closeRightBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': ishidden }" />
      </el-icon>
    </div>
    <div class="right-heard">
      <div class="title-box">
        <span class="title-font">预报断面</span>
        <span class="title-font-color">{{ '-' + props.sectionObj.title || '' }}</span>
      </div>
    </div>
    <div class="right-main">
      <div class="main-title title-font-color">基础信息</div>
      <div class="basics-box dm-box">
        <div class="basics-box-item">
          <span class="item-font">断面名称：</span>
          <span class="item-font font-color">{{ state.baseInfo.blknm || '' }}</span>
        </div>
      </div>
      <div class="basics-box dm-box">
        <div class="basics-box-item">
          <span class="item-font">断面编码：</span>
          <span class="item-font font-color">{{ state.baseInfo.blkcd || '' }}</span>
        </div>
      </div>
      <div class="main-title title-font-color">上游预报断面</div>
      <div class="section-box">
        <el-table border :data="state.upNodeArr" height="100%" style="width: 100%">
          <el-table-column prop="blkcd" label="上游编码" show-overflow-tooltip align="center" />
          <el-table-column prop="blknm" label="上游编码名称" show-overflow-tooltip align="center" />
          <!-- <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.blkcd)"
                >定位</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="main-title title-font-color">
        <span>拓扑关联设置</span>
        <!-- <span class="edit-bg"></span> -->
      </div>
      <div class="basics-box dm-box">
        <div class="basics-box-item item-margin">
          <span class="item-font">下游预报断面：</span>
          <span class="item-font font-color">{{ state.downNodeArr?.blkcd }}</span>
        </div>
      </div>
      <div class="basics-box dm-box">
        <div class="basics-box-item">
          <span class="item-font">下游预报断面名称：</span>
          <span class="item-font font-color">{{ state.downNodeArr?.blknm }}</span>
        </div>
      </div>

      <div class="main-title title-font-color">
        <div class="title-left">
          <span class="title-margin">映射监测站点</span>
          <!-- <span class="title-right">{{ radio1.value == 1 ? '有' : '无' }}</span> -->
          <!-- <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">有</el-radio>
            <el-radio label="2" size="large">无</el-radio>
          </el-radio-group>-->
        </div>
        <!-- <span class="edit-bg" @click="selectStation"></span> -->
      </div>
      <div class="basics-box dm-box" v-if="state.siteMap != ''">
        <div class="basics-box-item">
          <span class="item-font">站点名称：</span>
          <span class="item-font font-color">{{ state.siteMap.stnm || '' }}</span>
        </div>
      </div>
      <div class="basics-box dm-box" v-if="state.siteMap != ''">
        <div class="basics-box-item">
          <span class="item-font">监测类型：</span>
          <span class="item-font font-color">{{ state.siteMap.sttp }}</span>
        </div>
      </div>
      <div class="basics-box dm-box" v-if="state.siteMap != ''">
        <div class="basics-box-item">
          <span class="item-font">站点编号：</span>
          <span class="item-font font-color">{{ state.siteMap.stcd }}</span>
        </div>
      </div>

      <!-- <div class="main-title title-font-color">
        <div class="title-left">
          <span class="title-margin">映射节点/河道</span>
          <span>{{ radio2.value == 0 ? '河道' : '节点' }}</span>
        </div>
        <span class="edit-bg" @click="handleEdit"></span>
      </div> -->
      <div class="basics-box dm-box">
        <!-- <div class="basics-box-item item-margin-bot">
          <span class="item-font">节点/河道编码</span>
          <span class="item-font font-color" v-if="canEdit === 0">{{
            state.nodeInfo.outCode
          }}</span>
          <el-row :gutter="20" v-else>
            <el-col :span="25">
              <el-input v-model="state.nodeInfo.outCode" />
            </el-col>
          </el-row>
          <div class="btn" v-if="canEdit === 1">
            <el-button type="primary" @click="setRiverMap">保存</el-button>
            <el-button type="danger" @click="handleDeleteRiverCode">取消</el-button>
          </div>
        </div> -->
        <!-- <div class="basics-box-item isEdit">
          <span class="item-font">名称</span>
          <span class="item-font font-color" v-if="canEdit===0">{{ state.nodeInfo.blknm }}</span>
          <el-row :gutter="20" v-else>
            <el-col :span="25">
              <el-input v-model="state.nodeInfo.blknm" />
            </el-col>
          </el-row>

        </div>-->
      </div>
    </div>
    <!-- 弹窗 -->
    <station :dialogVisible="showDialog" @closeDialog="closeDig" @handleSelect="handleSelect" />
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getForecastSectionUnit,
  getSectionInfo,
  addSiteMap,
  setSiteMap,
  addRiverMap,
  editRiverMap
} from '@/services/modules/model-config'
import sec_topology from '@/assets/data/com_data/sec_topology.json'
import emitter from '@/utils/bus'
import station from './station.vue'

let showDialog = ref(false)

// handleSelect
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1') //1 有映射节点/河道 2 无
const canEdit = ref(0)

const state = reactive({
  baseInfo: {},
  nodeInfo: {},
  downNodeArr: [],
  upNodeArr: [],
  siteMap: {},
  riverMap: {}
})
const state2 = reactive({
  placeholderOne: '大汶河流域',
  optionsOne: [
    {
      value: '1',
      label: '大汶河流域'
    }
  ],
  dataList: [
    {
      title: '盘龙',
      id: 1
    },
    {
      title: '马盘龙',
      id: 2
    }
  ],
  sectionData: [
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 1
    },
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 2
    },
    {
      topNumber: 'WDA84111B000',
      numName: 'XXX',
      id: 3
    }
  ]
})
const ishidden = ref(false)
// 通过首页底部按控制右侧弹框切换
const rightOpen = ref(true)

const closeDig = (v) => {
  showDialog.value = v
}
const handleSelect = (item) => {
  if (state.siteMap.value == '') {
    addSiteMapFn({
      blkcd: state.baseInfo.blkcd, //预报断面
      zoneId: props.sectionObj.zoneId, //预报区域
      stcd: item.stcd //站点编码
    })
  } else {
    editSiteMapFn({ stcd: item.stcd, id: props.sectionObj.id })
  }
}

//映射节点、河道的编辑按钮
const handleEdit = () => {
  canEdit.value = canEdit.value == 0 ? 1 : 0
}
const selectStation = () => {
  showDialog.value = true
}
//映射节点、河道的编辑按钮
const setRiverMap = () => {
  if (state.riverMap == '') {
    addRiverMapFn({
      blkcd: state.baseInfo.blkcd, //预报断面
      zoneId: props.sectionObj.zoneId, //预报区域
      relCode: state.nodeInfo.outCode, //映射对象编码
      relType: Number(radio2.value) //映射类型：0：河道，1：节点
    })
  } else {
    editRiverMapFn({
      id: props.sectionObj.id,
      relCode: state.nodeInfo.outCode, //映射对象编码
      relType: Number(radio2.value) //映射类型：0：河道，1：节点
    })
  }
}
//映射节点 河道的删除按钮
function handleDeleteRiverCode() {
  canEdit.value = 0
}

// 通过首页列表和弹框按钮控制弹框显隐
// 默认弹框显示
const emit = defineEmits(['clickDiglog'], ['localtionBtns'])
const closeRightBox = () => {
  ishidden.value = !ishidden.value
  emit('clickDiglog', false)
}
//定位
function locationBtn(id) {
  emit('localtionBtns', id)
}

emitter.on('openRightDiglog', (value) => {
  if (value === 0) {
    rightOpen.value = true
  } else {
    rightOpen.value = false
  }
})
const props = defineProps({
  sectionObj: {
    type: Object,
    default: () => ({})
  },
  rightBox: {
    type: Boolean,
    default: true
  }
})
watch(
  () => props.sectionObj.title,
  () => {
    getSectionInfo({ blkcd: props.sectionObj.blkcd, id: props.sectionObj.id }).then((res) => {
      if (res.code === 200) {
        let _data = res.data
        state.baseInfo.blkcd = _data.info.blkcd
        state.baseInfo.blknm = _data.info.blknm
        state.upNodeArr = _data.fInfo
        state.downNodeArr = _data.oInfo
        state.siteMap = _data.siteMap
        state.riverMap = _data.riverMap
        state.nodeInfo.outCode = _data.riverMap.relCode
        if (state.siteMap == '') {
          radio1.value = '2'
        } else {
          radio1.value = '1'
        }
        if (state.riverMap.relType == 1) {
          radio2.value = '1'
        } else if (state.riverMap.relType == 0) {
          radio2.value = '0'
        } else {
          radio2.value = '0'
        }
        if (state.riverMap == '') {
          radio3.value = '1'
        } else {
          radio3.value = '2'
        }
      }
    })
  }
)
watchEffect(() => {
  ishidden.value = !props.rightBox
})
//添加站点映射关系
function addSiteMapFn(params) {
  return new Promise((resolve, reject) => {
    addSiteMap(params).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '添加站点映射关系成功',
          type: 'success'
        })
      }
    })
  })
}
//修改站点映射关系
function editSiteMapFn(params) {
  return new Promise((resolve, reject) => {
    setSiteMap(params).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '修改站点映射关系成功',
          type: 'success'
        })
        getSectionInfo({ blkcd: props.sectionObj.blkcd, id: props.sectionObj.id }).then((res) => {
          if (res.code === 200) {
            let _data = res.data
            state.siteMap = _data.siteMap
          }
        })
      }
    })
  })
}
//添加河道映射关系
function addRiverMapFn(params) {
  return new Promise((resolve, reject) => {
    addRiverMap(params).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '添加河道映射关系成功',
          type: 'success'
        })
      }
    })
  })
}
//修改河道映射关系
function editRiverMapFn(params) {
  return new Promise((resolve, reject) => {
    editRiverMap(params).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '修改河道映射关系成功',
          type: 'success'
        })
        canEdit.value = 0
      }
    })
  })
}
</script>

<style lang="less" scoped>
.right-box {
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: var(--fold-bg-color);
  border: 1px solid var(--fold-border-color);
  box-sizing: border-box;
  transition: right 1s;
  border-radius: 4px;

  &.hidden-icon {
    right: -800px;
    transition: right 1s;
  }
  .title-font-color {
    // color: var(--fold-word-color);
    color: #409eff;
  }
  .fold-icon {
    width: 20px;
    height: 120px;
    line-height: 120px;
    position: absolute;
    background: #eee;
    top: 50%;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    transform: translateY(-50%);
    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
      to {
        opacity: 1;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
    }
    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;
      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .right-heard {
    display: flex;
    justify-content: space-between;
    margin: 0 15px 0 20px;
    box-sizing: border-box;
    height: 60px;
    border-bottom: 1px solid var(--fold-border-color);
    line-height: 60px;
    .title-box {
      font-size: var(--header-fontsize);
      .title-font {
        // font-weight: 600;
      }
    }
  }
  .right-main {
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: var(--content-fontsize);
    & > div {
      margin: 10px 0;
    }
    .main-title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      .title-left {
        // width: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-margin {
          margin-right: 50px;
        }
        .title-right {
          color: black;
          font-weight: 600;
        }
      }
      .edit-bg {
        background: url(@/assets/images/basicsConfig/u26.png) no-repeat;
        background-size: 100% 100%;
        height: 20px;
        width: 22px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .basics-box {
      width: 100%;
      padding: 0 20px;
      margin: 0;
      .basics-box-item {
        display: flex;
        margin-bottom: 15px;
        &.isEdit {
          display: flex;
          align-items: center;
          .btn {
            margin-left: 20px;
          }
        }
        .item-font {
          display: block;
          // width: 130px;
          font-weight: 400;
          margin-right: 5px;
          color: #797979;
        }
        .font-color {
          color: black;
        }
      }
      .item-margin-bot {
        margin-right: 30px;
        display: flex;
        align-items: center;
      }
    }
    .dm-box {
      display: flex;
      .item-margin {
        margin-right: 10px;
      }
    }
    .section-box {
      padding: 0 20px;
      // height: 130px;
      height: 240px;
      margin-bottom: 10px;
    }
  }
}
</style>
